<template>
  <div class="bg-rose-50 py-10">
    <div class="h-[500px] w-4/5 bg-white my-0 mx-auto rounded-xl">
      <div class="float-left h-full w-2/5">
        <img class="w-40 h-40 object-cover rounded-full block mt-8 mx-auto"
          :src="'http://127.0.0.1:8081' + this.user.userImage">
        <v-btn class="block mt-10 mx-auto hover:bg-rose-100" @click="showDialog = true"> 更换头像 </v-btn>
        <v-btn class="block mt-12 mx-auto hover:bg-rose-100" @click="this.$router.push({ path: '/order' })"> 订单管理 </v-btn>
        <v-btn class="block mt-12 mx-auto hover:bg-rose-100" @click="this.$router.push({ path: '/address' })"> 地址管理
        </v-btn>
      </div>
      <div class="float-right text-lg mt-7 w-3/5">
        <table>
          <tr>
            <td class="w-32 h-12">昵称</td>
            <td>
              <input type="text" class="w-64 border-2 border-solid border-rose-600 rounded-md pl-1.5"
                v-model="user.userName">
            </td>
          </tr>
          <tr>
            <td class="w-32 h-12">年龄：</td>
            <td>
              <input type="text" class="w-64 border-2 border-solid border-rose-600 rounded-md pl-1.5" v-model="user.age">
            </td>
          </tr>
          <tr>
            <td class="w-32 h-12">密码：</td>
            <td>
              <input type="password" class="w-64 border-2 border-solid border-rose-600 rounded-md pl-1.5"
                v-model="user.password">
            </td>
          </tr>
          <tr>
            <td class="w-32 h-12">性别：</td>
            <td>
              <v-radio-group v-model="user.sex" inline class="inline">
                <v-radio label="男" value="男"></v-radio>
                <v-radio label="女" value="女"></v-radio>
                <v-radio label="保密" value=""></v-radio>
              </v-radio-group>
            </td>
          </tr>
          <tr>
            <td class="w-32 h-12">手机：</td>
            <td>
              <input type="text" class="w-64 border-2 border-solid border-rose-600 rounded-md pl-1.5"
                v-model="user.phone">
            </td>
          </tr>
          <tr>
            <td class="w-32 h-12">邮箱：</td>
            <td>
              <input type="text" class="w-64 border-2 border-solid border-rose-600 rounded-md pl-1.5"
                v-model="user.email">
            </td>
          </tr>
          <tr>
            <td class="w-32 h-28">个人简介：</td>
            <td>
              <textarea v-model="user.profile"
                class="w-64 h-20 border-2 border-solid border-rose-600 rounded-md pl-1.5"></textarea>
            </td>
          </tr>
        </table>
        <v-btn class="block ml-52 hover:bg-rose-100" @click="updateUserInfo"> 保存 </v-btn>
      </div>
    </div>
  </div>
  <!-- 修改头像弹框 -->
  <v-dialog v-model="showDialog" persistent width="600">
    <v-card>
      <v-card-text>
        <v-form>
          <v-container>
            <v-row>
              <v-col>
                <v-file-input accept="image/*" @change="onFileChange" label="上传图片" show-size color="success"
                  truncate-length="20">
                </v-file-input>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue-darken-1" type="submit" variant="text" @click="showDialog = false"> 关闭 </v-btn>
        <v-btn color="blue-darken-1" type="submit" variant="text" @click="updateUserImage()"> 保存 </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      showDialog: false,
      user: {
        userId: '',
        userName: '',
        password: '',
        age: '',
        sex: '',
        email: '',
        phone: '',
        userImage: '',
        profile: ''
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectUserByUserName',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) {// 没有卡片；卡片过期；卡片伪造时
          window.sessionStorage.setItem( 'msg', res.data.message )
          window.localStorage.removeItem( "userToken" )// 删除卡片，跳转到首页
          this.$message.warning( '登录超时，请重新登录' );
          this.$router.push( { path: '/login' } )
        } else {
          this.user = res.data.data.user
        }
      } )
    },
    // 更新用户信息
    updateUserInfo() {
      axios( {
        url: 'http://127.0.0.1:8081/api/updateUserInfo',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: this.user.userName,
          userId: this.user.userId,
          password: this.user.password,
          age: this.user.age,
          sex: this.user.sex,
          email: this.user.email,
          phone: this.user.phone,
          profile: this.user.profile
        }
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.$message.success( res.data.message )
        }
      } )
    },
    // 图片上传
    onFileChange( file ) {
      let formData = new FormData();
      formData.append( 'file', file.target.files[ 0 ] );
      axios.post( 'http://127.0.0.1:8081/api/onFileChange', formData, { headers: { 'token': window.localStorage.getItem( "userToken" ) } } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.user.userImage = res.data.data.userImage
        }
      } )
    },
    // 修改用户头像
    updateUserImage() {
      this.showDialog = false
      axios( {
        url: 'http://127.0.0.1:8081/api/updateUserImage',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
          userImage: this.user.userImage
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    }
  },
}
</script>

<style scoped></style>